<template>
  <div class="baiduUe">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建满减优惠券</span>
        </div>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="排序">
          <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>
        <el-form-item label="使用门槛" :required="true">
          <el-radio-group v-model="form.isFull">
            <el-radio label="1">无门槛</el-radio>
            <el-radio label="2">有门槛</el-radio>
          </el-radio-group>
          <template v-if="form.isFull=='2'">
            <span class="mar_r10">订单满</span>
            <el-input-number v-model="form.fullMoney" v-if="form.isFull=='1'" disabled controls-position="right" :min="1" :max="1000000"></el-input-number>
            <el-input-number v-model="form.fullMoney" v-else controls-position="right" :min="1" :max="1000000"></el-input-number>
            <span class="mar_l10">元才可用</span>
          </template>
        </el-form-item>
        <el-form-item label="优惠内容" :required="true">
          <div class="time_item">
            <span class="mar_r10">减免</span>
            <el-input-number v-model="form.money" controls-position="right" :min="1" :max="1000000"></el-input-number>
            <span class="mar_l10">{{ type=='1' ? '元' : '折' }}</span>
          </div>
        </el-form-item>
        <el-form-item label="适用门店" :required="true">
          <el-radio-group v-model="form.storeType">
            <el-radio label="2">全店通用</el-radio>
            <el-radio label="3">指定门店可用</el-radio>
          </el-radio-group>
          <div v-show="form.storeType=='3'">
            <el-scrollbar>
              <div class="recordBox">
                <el-table ref="multipleTable" :data="shopTable" tooltip-effect="dark" style="width: 100%">
                  <el-table-column prop="name" label="门店名称"></el-table-column>
                  <el-table-column prop="address" label="门店地址"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <div class="textbutton">
                        <el-button size="mini" type="text" @click="open2(scope.row,scope.$index)" class>删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
            <div class="addgoods textbutton">
              <i class="el-icon-plus subjectcolor2"></i>
              <el-button type="text" class @click="addshop(shopTable)">添加门店</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="平台补贴" v-show="form.storeType=='2' || form.storeType=='3'">
          <el-input v-model="form.subsidy" placeholder="请输入平台补贴"></el-input>
          <span class="mar_l10">元</span>
        </el-form-item>
        <el-form-item label="适用商品" :required="true">
          <el-radio-group v-model="form.goodsType">
            <el-radio label="1">全部商品可用</el-radio>
            <el-radio label="2">部分商品可用</el-radio>
            <el-radio label="3">部分商品不可用</el-radio>
            <el-radio label="4">指定商品分类</el-radio>
          </el-radio-group>
          <template v-if="form.goodsType=='4'">
            <el-select class="mar_t10" v-model="goodsArr" clearable multiple filterable allow-create placeholder="请选择商品分类">
              <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </template>
          <template v-if="form.goodsType=='2' || form.goodsType=='3'">
            <el-scrollbar>
              <div class="recordBox">
                <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" class="tablecenter">
                  <el-table-column prop="name" label="商品">
                    <template slot-scope="scope">
                      <div class="flex">
                        <div class="flex-g-0">
                          <el-image style="width: 60px;height: 60px;border-radius: 10px;" :src="scope.row.icon" fit="cover"></el-image>
                        </div>
                        <div class="flex-g-1 t_l">
                          <div class="mar_l10">{{scope.row.name}}</div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="价格"></el-table-column>
                  <el-table-column prop="stock" label="库存"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <div class="textbutton">
                        <el-button size="mini" type="text" @click="open1(scope.row,scope.$index)" class>删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
            <el-button type="text" class @click="addgood(tableData3)">
              <i class="el-icon-plus subjectcolor2"></i>
              <span>添加商品</span>
            </el-button>
          </template>
        </el-form-item>
        <el-form-item label="适用场景" :required="true">
          <el-checkbox-group v-model="form.useType">
            <el-checkbox label="1">外卖</el-checkbox>
            <el-checkbox label="2">堂食</el-checkbox>
            <el-checkbox label="3">快餐</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠券主题色" :required="true">
          <el-color-picker v-model="form.color"></el-color-picker>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>基本规则</span>
          </div>
        </div>
        <el-form-item label="使用时间" :required="true">
          <el-radio v-model="form.timeType" label="2">领券后</el-radio>
          <el-input-number size="mini" v-model="form.day" controls-position="right" :min="1" :max="1000000"></el-input-number>
          <span class="mar_l10">日内有效</span>
          <template v-if="form.timeType=='2'">
            <el-checkbox-group style="display: inline-block; margin-left: 10px;" v-model="form.isNextDay">
              <el-checkbox v-model="form.isNextDay" true-label="1" false-label="2">次日起</el-checkbox>
            </el-checkbox-group>
          </template>
          <div class="yb_margin lh16">默认从今日起，如需次日有效请勾选次日起选项</div>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>使用说明</span>
          </div>
        </div>
        <el-form-item label="分享图片">
          <div class="uploadSource bor_de rel flex" v-if="form.shareImg">
            <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
              <i class="el-icon-check" ref="imgicon1"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.shareImg,1)"></i>
            </label>
            <img :src="form.shareImg" @click="test(1)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(1)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
        </el-form-item>
        <el-form-item label="分享自定义标题">
          <el-input v-model="form.shareTitle" placeholder="请输入分享自定义标题"></el-input>
        </el-form-item>
        <el-form-item label="券说明">
          <baidu-ueditor :content="form.details" @ueditor="getUeditor"></baidu-ueditor>
        </el-form-item>
      </el-form>
    </div>
    <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
    <edit ref="edit" @fetchData="tableData"></edit>
    <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
  </div>
</template>
<script>
import { vip_submitCoupon, vip_getCouponData } from '@/api/plug';
import baiduUeditor from '@/plugins/baidu-ueditor';
import attachmentImg from '@/plugins/attachment-img';
import Edit from '@/views/plugin/plug/components/selectgood';
import shopEdit from '@/views/plugin/plug/components/selectshop';

export default {
  components: { baiduUeditor, attachmentImg, Edit, shopEdit },
  created() {
    this.init();
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        time: [{ required: true, message: '请选择活动时间', trigger: 'blur' }]
      },
      type: '1',
      id: '',
      isNextDay: [],
      form: {
        sort: '1',
        name: '',
        isFull: '1',
        fullMoney: '',
        money: '',
        discount: '',
        timeType: '2',
        isNextDay: '1',
        useType: ['1'],
        goodsType: '1',
        memberType: '1',
        storeType: '2',
        details: '',
        maxNum: '',
        shareImg: '',
        shareTitle: '',
        display: '1',
        color: '#EE472B',
        subsidy: ''
      },
      goodsArr: [],
      memberLabel: [],
      plugin: [],
      labelOptions: [],
      typeOptions: [],
      tableData3: [],
      shopTable: []
    };
  },
  methods: {
    changeIsNextDay(msg) {
      if (msg.length) {
        this.form.isNextDay = 1;
      } else {
        this.form.isNextDay = 2;
      }
    },
    tableData(tableData) {
      this.tableData3 = tableData;
    },
    async shopListData(data) {
      console.log(22, data);
      this.shopTable = data ? data : [];
    },
    open1(row, index) {
      console.log('删除', row, index);
      this.$delete(this.tableData3, index);
    },
    open2(row, index) {
      this.$delete(this.shopTable, index);
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      // console.log(this.$refs, i)
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.shareImg = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form2.environment.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.shareImg = '';
            break;
        }
      }
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row);
      } else {
        this.$refs['edit'].showEdit();
      }
    },
    getUeditor(content) {
      this.form.details = content;
    },
    async init() {
      const { data } = await vip_getCouponData();
      this.typeOptions = data.category ? data.category : [];
      this.labelOptions = data.label ? data.label : [];
    },
    async edit() {
      const { data } = await vip_getCouponData({ id: this.id });
      Object.assign(this.form, data);
      // if (data.isNextDay == 1) {
      //   this.isNextDay = ['1'];
      // } else {
      //   this.isNextDay = [];
      // }
      if (data.goodsType == '2' || data.goodsType == '3') {
        this.tableData3 = data.goodsArr ? data.goodsArr : [];
      }
      if (data.goodsType == '4') {
        this.goodsArr = data.goodsArr ? data.goodsArr : [];
      }
      if (data.memberType == '3') {
        this.memberLabel = data.memberLabel ? data.memberLabel : [];
      }
      if (data.storeInfo) {
        this.shopTable = data.storeInfo ? data.storeInfo : [];
      }
      // if (data.reductionArr) {
      //     this.fullArr = data.reductionArr.map((v => ({fullMoney: v.fullMoney, money: v.money,isFree:v.isFree})))
      // }
    },
    addgood(row) {
      if (row) {
        const id = row.map((item) => item.id);
        this.$refs['edit'].showEdit(id);
      } else {
        this.$refs['edit'].showEdit();
      }
      this.$refs['edit'].isSpec('');
    },
    addshop(row) {
      if (row) {
        const storeIds = row.map((item) => item.id);
        this.$refs['ShopEdit'].showEdit(storeIds);
      } else {
        this.$refs['ShopEdit'].showEdit();
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.type = this.type;
          if (this.form.goodsType == '2' || this.form.goodsType == '3') {
            if (this.tableData3) {
              this.form.goodsArr = this.tableData3.map((item) => item.id);
            }
          }
          if (this.form.goodsType == '4') {
            this.form.goodsArr = this.goodsArr;
          }
          if (this.form.memberType == '3') {
            this.form.memberLabel = this.memberLabel;
          }
          if (this.shopTable) {
            this.form.storeArr = this.shopTable.map((item) => item.id);
          }
          const { msg } = await vip_submitCoupon(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>
<style lang="scss">
.recordBox {
  max-height: 600px;
}

.baiduUe {
  .time_item .el-input {
    width: 180px;
  }
}
</style>
